<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layer弹层 - layui</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <style>
        body {
            padding: 50px 100px;
        }
    </style>
</head>
<body>

<button class="layui-btn demo " data-type="test">测试一</button>
<button class="layui-btn demo" data-type="test2">测试二</button>
<button class="layui-btn demo layui-disabled" data-type="test3">捕获页</button>

<div id="bbs_update_form" style="display: none;padding: 20px;">
    <form class="layui-form layui-form-pane" id="update_bbs_info_form">

        <div class="layui-form-item">
            <label class="layui-form-label">论坛封面</label>
            <div class="layui-input-block">
                <input type="text" name="bbs_bg" autocomplete="off" placeholder="请输入图片地址（1045px*180px）"
                       class="layui-input" value="http://q.jinsom.cn/wp-content/uploads/2016/12/bbs_bg.jpg">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">论坛头像</label>
            <div class="layui-input-block">
                <input type="text" name="bbs_avatar" autocomplete="off" placeholder="请输入图片地址（150px*150px）"
                       class="layui-input" value="http://q.jinsom.cn/wp-content/uploads/2016/12/timg.jpg">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">论坛介绍</label>
            <div class="layui-input-block">
      <textarea placeholder="50字内" class="layui-textarea" name="bbs_desc">LightSNS是一款wordpress轻社交主题，这里是关于你这个论坛的描述，随便扯吧。
</textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">论坛公告</label>
            <div class="layui-input-block">
                <textarea placeholder="100字内" class="layui-textarea" name="bbs_notice">公告</textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">付费功能</label>
            <div class="layui-input-block">
                <input type="checkbox" name="bbs_fufei" lay-skin="switch" title="开启付费可看功能" checked lay-skin="switch">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">验证码</label>
            <div class="layui-input-block">
                <input type="checkbox" name="bbs_captcha" lay-skin="switch" title="开启验证码功能">
            </div>
        </div>

        <div class="layui-form-item" style="text-align: right;">
            <div class="layui-btn" id="bbs_update_button">更新</div>
        </div>

    </form>
</div>

<!--<script type='text/javascript' src='http://q.jinsom.cn/wp-content/themes/jinsomQ/js/jquery.min.js?ver=0.3'></script>-->
<script src="layui/layui.js"></script>
<script>
  layui.use('layer', function () {
    var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句

    //触发事件
    var active = {
      test: function () {
        layer.alert('你好么，体验者');
      }
      , test2: function () {
        layer.open({
          type: 2
          , content: 'http://fly.layui.com/'
          , area: ['375px', '500px']
          , maxmin: true
          , shade: 0.0001
          , success: function () {
            parent.zhezhao.style.display = "block";
          }
          ,cancel: function(index, layero){
//            if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭
//              layer.close(index);
              parent.zhezhao.style.display = "none";
//            }
//            return false;
          }
        })
      }
      , test3: function () {
        layer.open({
          title: '更新论坛信息',
          type: 1,
          skin: 'layui-layer-rim',
          area: ['500px', '580px'],
          content: $('#bbs_update_form')
        });
      }
    };
    $('.demo').on('click', function () {
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });
  });
</script>
</body>
</html>
